<template>
    <div class="questionnaire">
        <div class="questionnaire-content">
            <el-carousel ref="carousel" arrow="always" :height="bannerHeight + 'px'" :autoplay="false" :loop="false"
                @change="((pre, next) => { defineShowNextArrow(pre, next) })">
                <el-carousel-item v-for="(item, index) in formTemplates" :key="index">
                    <component :is="item" :ref="'formComponent'" @formValidated="switchToNextPage"
                        :showNextArrow="showNextArrow" @updateShowNextArrow="handleUpdateShowNextArrow"
                        @clickFatherButton="clickFatherButton"></component>
                </el-carousel-item>
            </el-carousel>
        </div>
    </div>
</template>
  
<script>
import FormComponent1 from '../components/QuesForm/QuesForm1.vue'
import FormComponent2 from '../components/QuesForm/QuesForm2.vue'
import FormComponent3 from '../components/QuesForm/QuesForm3.vue'
import FormComponent4 from '../components/QuesForm/QuesForm4.vue'
import FormComponent5 from '../components/QuesForm/QuesForm5.vue'
import FormComponent6 from '../components/QuesForm/QuesForm6.vue'
import FormComponent7 from '../components/QuesForm/QuesForm7.vue'
import FormComponent8 from '../components/QuesForm/QuesForm8.vue'
import FormComponent9 from '../components/QuesForm/QuesForm9.vue'
import FormComponent10 from '../components/QuesForm/QuesForm10.vue'
import FormComponent11 from '../components/QuesForm/QuesForm11.vue'
import FormComponent12 from '../components/QuesForm/QuesForm12.vue'
import FormComponent13 from '../components/QuesForm/QuesForm13.vue'
import FormComponent14 from '../components/QuesForm/QuesForm14.vue'


export default {
    components: {
        FormComponent1,
        FormComponent2,
        FormComponent3,
        FormComponent4,
        FormComponent5,
        FormComponent6,
        FormComponent7,
        FormComponent8,
        FormComponent9,
        FormComponent10,
        FormComponent11,
        FormComponent12,
        FormComponent13,
        FormComponent14,
    },
    data() {
        return {
            formTemplates: ['FormComponent1', 'FormComponent2', 'FormComponent3', 'FormComponent4', 'FormComponent5', 'FormComponent6', 'FormComponent7', 'FormComponent8', 'FormComponent9', 'FormComponent10', 'FormComponent11', 'FormComponent12', 'FormComponent13', 'FormComponent14'],
            bannerHeight: 0,
            screenHeight: 0,
            showNextArrow: false,
            formComponent: [],
            showButton: false,
            formValues: {},
        };
    },
    mounted: function () {
        this.screenHeight = window.innerHeight;
        this.setSize();
        window.onresize = () => {
            this.screenHeight = window.innerHeight;
            this.setSize();
        };
    },
    methods: {
        setSize: function () {
            // 通过屏幕高度计算高度
            this.bannerHeight = 0.8 * this.screenHeight;
        },
        switchToNextPage() {
            this.$refs.carousel.next();
        },
        handleUpdateShowNextArrow(value) {
            this.showNextArrow = value;
            // 获取子组件传递过来的更新后的 showNextArrow 值
        },
        defineShowNextArrow(pre, next) {
            if (pre < 13) {
                const formComponent = this.$refs.formComponent[pre];
                if (formComponent && typeof this.$refs.formComponent[pre].getShowNextArrow() === 'boolean') {
                    this.showNextArrow = this.$refs.formComponent[pre].getShowNextArrow();
                }
            }
        },
        clickFatherButton() {
            for (var i = 0; i < 14; i++) {
                const child = this.$refs.formComponent[i];
                if (child.quesForm) {
                    // 存储子组件表单数据到 formValues 中
                    Object.assign(this.formValues, child.quesForm);
                }
            }
            console.log(this.formValues)
        }

    },
    updated() {
        const customArrow = document.querySelector('.el-carousel__arrow--right');
        if (customArrow) {
            customArrow.style.display = this.showNextArrow ? 'block' : 'none';
        }
    },
}

</script>

<style lang="scss">
.questionnaire {
    position: relative;
    width: 100vw;
    height: 100vh;
    background-image: url(../assets/ques-back.png);

    .questionnaire-content {
        position: absolute;
        left: 12%;
        top: 10%;
        width: 76%;
        height: 80%;
        background-color: inherit;
        background-color: rgba(255, 255, 255, 0.5);
        backdrop-filter: blur(20px);
        border-radius: 50px;
        border: 2px solid rgba(255, 255, 255, 0.3);

    }

    .el-carousel__indicators {
        display: none;
    }

}
</style>